import "./index.css";
import { useIntl } from "react-intl";

export const Loading = () => {
  const intl = useIntl();
  return (
    <div className="loading-container">
      <div className="page-loading-warp">
        <div className="ant-spin ant-spin-lg ant-spin-spinning">
          <span className="ant-spin-dot ant-spin-dot-spin">
            <i className="ant-spin-dot-item"></i>
            <i className="ant-spin-dot-item"></i>
            <i className="ant-spin-dot-item"></i>
            <i className="ant-spin-dot-item"></i>
          </span>
        </div>
      </div>
      <div className="loading-title">
        {intl.formatMessage({
          id: "pages.admin.subPage.title",
          defaultMessage: "This page can only be viewed by admin",
        })}
      </div>
      <div className="loading-sub-title">
        {intl.formatMessage({
          id: "pages.admin.subPage.title",
          defaultMessage: "This page can only be viewed by admin",
        })}
      </div>
    </div>
  );
};

export default Loading;
